<template>
  <div class="part-time-job">
    <el-form :model="queryParams" ref="queryForm" :inline="true" size="mini">
      <el-form-item label="关键字" prop="keyword">
        <el-input v-model="queryParams.keyword" placeholder="请输入工作内容或工作简介" />
      </el-form-item>
      <el-form-item label="联系方式" prop="contact">
        <el-input v-model="queryParams.contact" placeholder="请输入联系方式" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-plus" @click="addPartTimeJob">发布兼职</el-button>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="partTimeJobList">
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="工作内容" :show-overflow-tooltip="true" />
      <el-table-column prop="salary" label="薪水" width="100" />
      <el-table-column prop="count" label="招聘人数" width="100" />
      <el-table-column prop="workTime" label="工作时间" />
      <el-table-column prop="workAddress" label="工作地址" />
      <el-table-column prop="contact" label="联系方式" />
      <el-table-column prop="publishTime" label="发布时间" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">已发布</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="danger">已结束</el-tag>
          <el-tag v-else type="warning">已取消</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" align="center" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-view" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="primary" icon="el-icon-view" @click="handleApply(scope.row)">查看申请</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleCancel(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
      :current-page='queryParams.pageNum' :page-sizes='[5, 10, 15]' :page-size='queryParams.pageSize'
      layout='total, sizes, prev, pager, next' :total='total'></el-pagination>
    <el-dialog title="兼职详情" :visible.sync="dialogVisible" width="700px" :close-on-click-modal="false">
      <el-form ref='detailForm' :model="detailForm" label-width="100px" size="mini" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="detailForm.title" />
        </el-form-item>
        <el-form-item label="工作内容" prop="content">
          <el-input type="textarea" v-model="detailForm.content" />
        </el-form-item>
        <el-form-item label="薪水" prop="salary">
          <el-input v-model="detailForm.salary" />
        </el-form-item>
        <el-form-item label="招聘人数" prop="count">
          <el-input v-model="detailForm.count" />
        </el-form-item>
        <el-form-item label="工作时间" prop="workTime">
          <el-input v-model="detailForm.workTime" />
        </el-form-item>
        <el-form-item label="工作地址" prop="workAddress">
          <el-input v-model="detailForm.workAddress" />
        </el-form-item>
        <el-form-item label="联系方式" prop="contact">
          <el-input type="mobile" v-model="detailForm.contact" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="detailForm.remark" />
        </el-form-item>
        <el-form-item>
          <el-button type='primary' @click='submitForm'>提交</el-button>
          <el-button @click='cancel'>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="申请列表" :visible.sync="applyDialogVisible" width="1200px">
      <el-table :data="applyList">
        <el-table-column prop="nickname" label="姓名"></el-table-column>
        <el-table-column prop="userAvatar" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.userAvatar" style="width:40px;height:40px;border-radius:50%;" />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="{
              0: 'warning',
              1: 'success',
              2: 'danger'
            }[scope.row.status]">
              {{ { 0: '待审核', 1: '已通过', 2: '已拒绝' }[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applyTime" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 0" size="mini" type="success"
              @click="handleAudit(scope.row.id, 1)">通过</el-button>
            <el-button v-if="scope.row.status === 0 || scope.row.status === 1" size="mini" type="danger"
              @click="handleAudit(scope.row.id, 2)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { partTimeJobPage, partTimeJobDetail, partTimeJobAdd, partTimeJobUpdate, partTimeJobCancel, partTimeJobAudit, partTimeJobApplyList } from '@/api/partTimeJob'
export default {
  name: 'PartTimeJob',
  data: () => {
    return {
      loading: false,
      total: 0,
      partTimeJobList: [],
      queryParams: {
        keyword: undefined,
        contact: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      detailForm: {},
      dialogVisible: false,
      currentJobId: null,
      applyDialogVisible: false,
      applyList: [],
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入工作内容', trigger: 'blur' }],
        salary: [{ required: true, message: '请输入薪水', trigger: 'blur' }],
        count: [{ required: true, message: '请输入招聘人数', trigger: 'blur' }],
        workTime: [{ required: true, message: '请输入工作时间', trigger: 'blur' }],
        workAddress: [{ required: true, message: '请输入工作地址', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        const response = await partTimeJobPage(this.queryParams)
        this.partTimeJobList = response.records
        this.total = Number(response.total)
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.$refs['queryForm'].resetFields()
      this.handleQuery()
    },
    async handleDetail(row) {
      const response = await partTimeJobDetail(row.id)
      this.detailForm = response
      this.dialogVisible = true
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.fetchData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pageParams.pageNum = val
      this.fetchData()
    },
    addPartTimeJob() {
      this.dialogVisible = true
    },
    async submitForm() {
      const validateRes = await this.$refs.detailForm.validate;
      if (validateRes) {
        let res;
        if (this.detailForm.id) {
          res = await partTimeJobUpdate(this.detailForm);
        } else {
          res = await partTimeJobAdd(this.detailForm);
        }
        this.$message.success(res);
        this.dialogVisible = false;
        this.getList();
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.$refs.detailForm.resetFields();
    },
    // 取消兼职
    async handleCancel(row) {
      await this.$confirm('确定要取消该兼职吗？', '提示', { type: 'warning' })
      await partTimeJobCancel(row.id)
      this.$message.success('取消成功')
      this.getList()
    },
    // 查看申请
    async handleApply(row) {
      this.currentJobId = row.id
      const res = await partTimeJobApplyList(this.currentJobId)
      this.applyList = res
      this.applyDialogVisible = true
    },

    // 审核操作
    async handleAudit(applyId, status) {
      await partTimeJobAudit(applyId, status)
      this.$message.success('操作成功')
      // 刷新申请列表
      this.handleApply({ id: this.currentJobId })
    }
  }
} 
</script>
<style scoped></style>
